<template>
  <div class="image-select-wrapper">
    <div class="image-select-l">
      <div class="component-image-select" @click="handleClick">
        <img v-if="url" :src="url" alt="">
        <div v-else class="image-preview-null">
          <p><v-icon>mdi-plus</v-icon></p>
          <p>选择图片</p>
        </div>
      </div>
    </div>
    <div class="image-select-r">
      <v-textarea
        v-model="tempValue"
        label="图片地址"
        outlined
        height="100"
        class="image-input"
      />
    </div>
  </div>
</template>

<script>
import $bus from '@/eventBus'
export default {
  props: {
    url: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 唯一得id用于选择图片后事件通知
      selectId: +new Date(),
      tempValue: ''
    }
  },
  watch: {
    url(val) {
      this.tempValue = val
    },
    tempValue(val) {
      this.changeIamge(this.selectId, val)
    }
  },
  created() {
    $bus.$on('select-image', this.changeIamge)
    this.tempValue = this.url
  },
  methods: {
    changeIamge(id, url) {
      if (id !== this.selectId) {
        return
      }
      this.$emit('update:url', url)
      this.$emit('change', url)
    },
    /**
			 * 点击弹出选择图片弹窗
			 */
    handleClick() {
      $bus.$emit('show-select-image', this.selectId)
    }
  }
}
</script>

<style lang="scss" scoped>
  .component-image-select {
    width: 100px;
    height: 100px;
    border: 1px dashed #2196F3;
    border-radius: 3px;
    margin-bottom: 18px;
    text-align: center;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.28s;
    position: relative;
    background: #eee 50%/contain no-repeat;
    justify-content:center;
    align-items:center;
    display: flex;
    &:hover {
      color: #2196F3;
    }
    img{
      display: inline-block;
      max-width: 100%;
      max-height: 100%;
    }
    p{
      line-height: 1;
      padding-bottom: 10px;
    }
  }
  .image-preview-null {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding-top: 25px;
    background: rgba(0, 0, 0, 0.2);
  }
  .image-select-wrapper{
    display: flex;
    .image-select-l{
      width: 108px;
    }
    .image-select-r{
      flex: 1;
      .image-input {
        ::v-deep textarea {
          &::-webkit-scrollbar {
            width: 0;
            height: 0;
          }
          &::-webkit-scrollbar-track {
            background: #fff;
          }
          &::-webkit-scrollbar-thumb {
            background: #d8d8d8;
          }
          &::-webkit-scrollbar-corner {
            background: #d8d8d8;
          }
          &::-webkit-scrollbar-thumb:hover {
            background: #999; // 高亮的颜色
          }
        }
      }
    }
  }
</style>
